<template>
  <div>
    <meta name="referrer" content="never">
    <div class="row">
      <div class="relative-position" style="width: 100%">
        <q-img :src="avatar"
               placeholder-src="img/character/equipment_unknown.png"
               :ratio="1"
               style="border-radius: 10%;"/>
        <div class="absolute-top mask"></div>
        <div class="absolute-top"
             style="width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); border-radius: 6%;"
             v-if="disable"/>
        <div class="absolute-top-left gt-xs"
             style="margin-left: 6%; margin-top: 4%;"
             v-if="rank">
          <div class="text-bold" style="text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0">
            RANK{{ rank }}
          </div>
        </div>
        <div class="absolute-top-left lt-sm"
             style="margin-left: 6%; margin-top: 4%; font-size: 0.4em"
             v-if="rank">
          <div class="text-bold" style="text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0">
            RANK{{ rank }}
          </div>
        </div>
        <div class="absolute-bottom-left"
             style="margin-left: 6%; margin-bottom: 6%; width: 94%; height: 16%"
             v-if="star">
          <div class="row items-start justify-start" style="height: 100%">
            <div v-for="count in star"
                 :key="count"
                 class="col-2" style="height: 100%">
              <img style="width: 100%;" src="img/character/star.png"/>
            </div>
          </div>
        </div>
        <slot name="default" />
      </div>
    </div>
    <div class="row" v-if="displayName">
      <div class="col-12 text-center text-body1 text-bold ellipsis">
        {{ name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Character",
  props: {
    displayName: {
      type: Boolean,
      default: true
    },
    name: {
      type: String,
      default: '？？？'
    },
    avatar: {
      type: String
    },
    star: {
      type: Number
    },
    rank: {
      type: Number
    },
    disable: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.mask {
  width: 100%;
  height: 100%;
  background: url('../../public/img/character/border.png');
  background-size: 100% 100%;
  top: 0;
  left: 0;
}
</style>
